<template>
    <el-form ref="formRef" class=" pb-3" :model="formData" label-width="110px" inline>
        
        <el-card class="!border-none flex flex-col" shadow="never">
            <div class="flex justify-between items-center p-4">
                <el-tabs class="flex items-center" tab-position="left">
                    <el-tab-pane class="text-2xl font-medium" disabled>公司详情</el-tab-pane>
                </el-tabs>
                <el-button type="primary" @click="handleCreateFeedbackRecord">
                    <template #icon>
                        <icon name="el-icon-Plus"/>
                    </template>
                    公司跟踪反馈
                </el-button>
            </div>
        </el-card>
        
        <el-card class="!border-none flex flex-1  justify-center items-center" shadow="never">
            <div class=" text-lg	 mb-4">
                公司信息
            </div>
            
            <div class=" w-[800px]  ">
                <div class="pl-3 grid grid-cols-2 gap-0">
                    <div>
                        <el-form-item label="公司名称 :">
                            <p class="text-tx-regular">
                                {{ formData.crmCorporationDTO?.companyName }}
                            </p>
                        
                        </el-form-item>
                    </div>
                    
                    <div>
                        <el-form-item label="公司电话 :">
                            <p class="text-tx-regular">
                                {{ formData.crmCorporationDTO?.companyPhone }}
                            </p>
                        
                        </el-form-item>
                    </div>
                    
                    
                    <div>
                        <el-form-item label="公司法人 :">
                            <p class="text-tx-regular">
                                {{ formData.crmCorporationDTO?.legalPersonName }}
                            </p>
                        </el-form-item>
                    </div>
                    
                    
                    <div>
                        <el-form-item label="公司地址 :">
                            <p class="text-tx-regular">
                                {{ formData.crmCorporationDTO?.fullAddress }}
                            </p>
                        </el-form-item>
                    </div>
                
                </div>
            
            </div>
        </el-card>
    </el-form>
    
    
    <el-card class="!border-none" shadow="never">
        <el-tabs v-model="activeTab">
            <el-tab-pane label="员工列表" name="first">
                <div class="h-full">
                    <TableOne :id="idRequest.id"></TableOne>
                </div>
            </el-tab-pane>
            
            <el-tab-pane label="物流列表" name="second">
                <div class="h-full">
                    <TableTwo :id="idRequest.id"></TableTwo>
                </div>
            </el-tab-pane>
            
            <el-tab-pane label="跟踪列表" name="three">
                <div class="h-full">
                    <Table-three :crmFeedData="crmFeedData"></Table-three>
                </div>
            </el-tab-pane>
            
            <el-tab-pane label="数据列表" name="four">
                <div class="h-full">
                    <Table-four :id="idRequest.id"></Table-four>
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-card>
</template>

<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {UnwrapNestedRefs} from "@vue/reactivity";
import {IdRequest} from "@/api/baisc/IdRequest";
import {createFeedbackRecord, getCorporationDetail, getFeedbackRecord} from "@/api/logistics/CrmCorporationController";
import CrmCorporationDetailDTO from "@/api/logistics/dto/CrmCorporationDetailDTO";
import {useRoute} from "vue-router";
import TableOne from "@/views/logistics/client/crporation/tableOne.vue";
import feedback from "@/utils/feedback";
import TableTwo from "@/views/logistics/client/crporation/tableTwo.vue";
import TableThree from "@/views/logistics/client/crporation/tableThree.vue";
import TableFour from "@/views/logistics/client/crporation/tableFour.vue";

import CrmFeedbackRecordRequest from "@/api/logistics/request/CrmFeedbackRecordRequest";
import CrmFeedbackRecordDTO from "@/api/logistics/dto/CrmFeedbackRecordDTO";

const activeTab = ref('first');
let idRequest = ref(new IdRequest());
let route = useRoute();
let formData: UnwrapNestedRefs<CrmCorporationDetailDTO> = reactive(new CrmCorporationDetailDTO());
let crmFeedData: UnwrapNestedRefs<CrmFeedbackRecordDTO[]> = reactive([new CrmFeedbackRecordDTO()]);

// 在 watch 外部赋值
idRequest.value.id = route.query?.id as any;

function handleCreateFeedbackRecord() {
    feedback.prompt("请简单描述公司跟踪信息", "反馈信息").then(item => {
        const crmLogisticsAdminRequest = new CrmFeedbackRecordRequest();
        crmLogisticsAdminRequest.description = item.value?.trim();
        
        if (formData.crmCorporationDTO?.id) {
            crmLogisticsAdminRequest.bizId = formData.crmCorporationDTO?.id;
            
            createFeedbackRecord(crmLogisticsAdminRequest).then(async () => {
                feedback.notifySuccess("添加反馈记录成功");
                getFeedbackRecord({bizId: formData.crmCorporationDTO?.id}).then((res) => {
                    Object.assign(crmFeedData, res);
                });
            });
        }
    });
}

// 使用 watch 监听 idRequest.id 的变化
watch(
    () => idRequest.value.id,
    async (newId) => {
        if (newId) {
            try {
                const spoons = await getCorporationDetail(idRequest.value);
                Object.assign(formData, spoons);
                
                if (formData.crmCorporationDTO?.id) {
                    const res = await getFeedbackRecord({bizId: formData.crmCorporationDTO?.id});
                    Object.assign(crmFeedData, res);
                }
            } catch (error) {
                console.error('数据请求出错:', error);
            }
        }
    },
    {immediate: true}
);
</script>